<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>验证结果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
    </script>
    <style>
        .success{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-top: 1.8rem;
        }
        #success_box,#fail_box{
            display: none;
        }
        button {
            width: 100%;
            padding:8px;
            background-color: #22b626;
            color: #fff;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 22px; /* future proofing */
            text-align: center;
            vertical-align: middle;
            border: 1px solid #22b626;
            font-weight: 900;
            font-size:.38rem;
            outline:none
        }
        .hand{
            vertical-align: super;
            display: inline-block;
            -moz-transform: rotate(-135deg);/* Firefox 旋转属性，参数表示角度(deg表示角度)，负数逆时针，正数顺时针 */
            -webkit-transform: rotate(-135deg);/* Safari和Chrome */
            -ms-transform: rotate(-135deg);/* IE 9 */
            -o-transform: rotate(-135deg);/* Opera */
        }
        .hand_icon{
            width: .6rem;
        }
        .attention{
            vertical-align: bottom;
            display: inline-block;
            margin-left: .2rem;
            color: #ff8080;
            font-size: .35rem;
        }
    </style>
</head>

<body>
<div class="main">
    <div id="success_box">
        <div>
                <span class="hand">
                    <img src="img/here.png" class="hand_icon">
                </span>
            <span class="attention">点击这里返回小程序</span>
        </div>
        <div class="success">
            <img src="/success.png" style="width: 1.5rem">
            <p style="color:#4ba4ff;font-size: .52rem">认证成功!</p>
        </div>
        <p style="color: darkgrey;padding:0 .3rem;font-size: .32rem">请点击左上角"返回"按钮回到小程序中后，完成签约流程。</p>
    </div>
    <div id="fail_box">
        <div>
                <span class="hand">
                    <img src="/here.png" class="hand_icon">
                </span>
            <span class="attention">点击这里返回公众号</span>
        </div>
        <div class="success">
            <img src="/fail.png" style="width: 1.5rem">
            <p style="color:#ff5656;font-size: .52rem">认证失败!</p>
        </div>
        <p style="color: darkgrey;padding:0 .3rem;font-size: .32rem">如需重新继续认证，左上角"返回"按钮回到公众号后，再次认证。</p>
    </div>
</div>
</body>
<script>
    (function(designWidth, maxWidth) {
        var isSuccess = {{$result}}
        var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;

        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width>maxWidth && (width=maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }

        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
        refreshRem();

        win.addEventListener("resize", function() {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);

        win.addEventListener("pageshow", function(e) {
            if (e.persisted) { // 浏览器后退的时候重新计算
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);

        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function(e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }


        console.log(isSuccess)
        if(isSuccess){
            document.getElementById('success_box').style.display="block"
        }else if(!isSuccess) {
            document.getElementById('fail_box').style.display="block"
        }
    })(750, 1024);


</script>


</html>
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->